<template>
  <div class="user-group-role-page-table">
    <qc-page-table
      ref="userRolePageTableRef"
      :columns="columns"
      :loadData="loadData"
      :rowKey="(record) => record[primaryKey]"
    >
      <template #toolbarTitle>
        {{ t('org.user-group-role.usesrRoleTableTitle') }}
      </template>
      <template #toolbarButton>
        <qc-add-button @click="addUser">
          {{ t('org.role.addRoleBtn') }}
        </qc-add-button>
        <qc-delete-button @click="deleteButtonClick"></qc-delete-button>
      </template>
      <template #customRoleType="{ text, record }">
        <a-tag :color="record.roleType === 'MANAGER_ROLE' ? 'volcano' : 'purple'">
          {{ text }}
        </a-tag>
      </template>
      <template #customIsValid="{ text }">
        <a-tag v-if="text === true" color="#87d068">
          {{ t('org.role.effective') }}
        </a-tag>
        <a-tag v-else color="#f50">
          {{ t('org.role.invalid') }}
        </a-tag>
      </template>
    </qc-page-table>
    <role-select-modal
      v-model:value="visibleRoleModal"
      :userId="userId"
      @selectRoleOk="handleRoleOk"
    ></role-select-modal>
  </div>
</template>

<script lang='ts'>
import { useI18n } from 'vue-i18n'
import { defineComponent, onMounted, ref, toRefs, reactive, Ref } from 'vue'
import { roleTableColumns } from '../../role/interface'
import userGroupRoleApi from '/@/api/org/user-group-role'
import { useModelPageTable } from '/@/kit/model-kit'
import RoleSelectModal from '/@/views/org/role/component/role-select-modal.vue'
export default defineComponent({
  name: 'RoleUserGroup',
  props: {
    userId: String,
    userGroupType: {
      type: String,
      default: 'USER',
    },
  },
  components: {
    RoleSelectModal,
  },
  setup(props) {
    const { t } = useI18n()
    const userRolePageTableRef: Ref<any> = ref(null)
    const { primaryKey, searchTable, deleteSelectData, reloadTable } = useModelPageTable(
      userRolePageTableRef,
      userGroupRoleApi
    )
    const userRoleState = reactive({
      //用户组角色关联
      columns: roleTableColumns,
      primaryKey,
      //加载数据方法
      loadData: (param: any) => {
        return userGroupRoleApi.userRoleList({
          ...param,
          userId: props.userId,
        })
      },
      visibleRoleModal: false,
      //新增角色关联
      addUser: () => (userRoleState.visibleRoleModal = true),
      handleRoleOk: (roleList: Array<any>) => {
        let userGroupRoleList = []
        roleList.forEach((role) => {
          userGroupRoleList.push({
            roleId: role.roleId,
            userGroupId: props.userId,
            userGroupType: props.userGroupType,
          })
        })
        userRoleState.insertBatchuserRole(userGroupRoleList)
      },
      //批量插入用户组信息
      insertBatchuserRole: (userGroupRoleList: Array<any>) => {
        userGroupRoleApi.addBatch(userGroupRoleList).then((res) => {
          userRoleState.visibleRoleModal = false
          reloadTable()
        })
      },
      //删除角色用户组关联
      deleteButtonClick: () => deleteSelectData(),
    })
    onMounted(() => searchTable())
    return {
      t,
      userId: props.userId,
      userRolePageTableRef,
      ...toRefs(userRoleState),
    }
  },
})
</script>

